<template>
  <div>
    <el-row>
      <el-col :span="8" :offset="8">
        <el-container>
          <div class="login-panel">
            <div class="login-panel-box login-back"></div>
            <div class="login-panel-box login-main">
              <div class="login-to login-to-home" title="返回主页">
                <span class="iconfont icon-fanhui" @click="$router.go(-1)"></span>
              </div>
              <div class="logo" @click="goto('/','Index')">
                <span class="logo-s">S</span>
                <span class="logo-j">J</span>
              </div>
              <el-form label-position="right" :model="registerForm" :rules="rules" ref="registerForm">
                <el-form-item prop="username">
                  <el-input placeholder="用户名..." prefix-icon="iconfont icon-username"
                            v-model="registerForm.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input placeholder="密码..." prefix-icon="iconfont icon-mima2" type="password" show-password
                            v-model="registerForm.password"></el-input>
                </el-form-item>
                <el-form-item prop="repassword">
                  <el-input placeholder="重复密码..." prefix-icon="iconfont icon-mima" type="password" show-password
                            v-model="registerForm.repassword"></el-input>
                </el-form-item>
                <el-form-item>
                  <div class="sex-box">
                    <el-radio v-model="registerForm.sex" label="男"></el-radio>
                    <el-radio v-model="registerForm.sex" label="女"></el-radio>
                  </div>
                </el-form-item>
                <el-form-item prop="code">
                  <el-row :gutter="20">
                    <el-col :span="16">
                      <el-input placeholder="验证码..." prefix-icon="iconfont icon-yanzhengma1"
                                v-model="registerForm.code"></el-input>
                    </el-col>
                    <el-col :span="8">
                      <el-image :src="src" class="code-box" @click="getCaptcha">
                        <div slot="placeholder" class="image-slot">
                          加载中<span class="dot">...</span>
                        </div>
                        <div slot="error" class="image-slot">
                          <i class="el-icon-picture-outline"></i>
                        </div>
                      </el-image>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-form>
              <el-button type="success" style="width: 100%" round plain @click="register('registerForm')">注册</el-button>
            </div>
          </div>
        </el-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    let checkUsername = (rule, value, callback) => {
      if (value.trim() != "") {
        this.$get(this.$api.CHECK_USERNAME_URL + "/" + value, {}).then(res => {
          if (res.data.code == 417) {
            return callback(new Error("该用户名已存在"));
          } else if (res.data.code == 200) {
            callback();
          }
        });
      }
    }

    let checkRepassword = (rule, value, callback) => {
      if (value.trim() != this.registerForm.password.trim()) {
        return callback(new Error("两次密码不一致"));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        username: "",
        password: "",
        repassword: "",
        sex: "男",
        key: "",
        code: "",
        avatar: "",
      },
      src: "",
      rules: {
        username: [
          {required: true, message: "请输入用户名", trigger: 'blur'},
          {pattern: /^([a-zA-Z\d]){2,10}$/, message: "长度为2到10个字符(不能含有中文字符)", trigger: 'blur'},
          {validator: checkUsername, trigger: 'blur'}
        ],
        password: [
          {required: true, message: "请输入密码", trigger: 'blur'},
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W\.]{6,18}$/,
            message: "密码必须包含数字和字母，可以有特殊字符长度为6-18个字符",
            trigger: 'blur'
          }
        ],
        repassword: [
          {required: true, message: "请输入密码", trigger: 'blur'},
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W\.]{6,18}$/,
            message: "密码必须包含数字和字母，可以有特殊字符长度为6-18个字符",
            trigger: 'blur'
          },
          {validator: checkRepassword, trigger: 'blur'}
        ],
        code: [
          {required: true, message: "请输入验证码", trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.getCaptcha();
  },
  methods: {
    register(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          if (this.registerForm.sex == "男") {
            this.registerForm.avatar = 'http://sj-xq.oss-cn-hangzhou.aliyuncs.com/sjblog/2021/08/12/1c558fdcb37e4ec38cee309ad3ab865cavatar-boy.png'
          } else {
            this.registerForm.avatar = 'http://sj-xq.oss-cn-hangzhou.aliyuncs.com/sjblog/2021/08/12/8930eda80140498aab50ddc29baa92a9avatar-girl.png'
          }
          this.$put(this.$api.REGISTER_URL, this.registerForm).then(res => {
            if (res.data.code == 200) {
              this.$router.push({
                path: '/login',
                name: 'Login'
              });
              this.$notify.success("注册成功,请先登录")
            } else {
              this.getCaptcha();
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getCaptcha() {
      this.$get(this.$api.CAPTCHA_URL, null).then(res => {
        this.registerForm.key = res.data.data.key;
        this.src = res.data.data.base64Image;
      })
    },
    goto(path, name) {
      this.$router.push({
        path, name
      })
    }
  }
}
</script>

<style scoped>
.login-panel {
  width: 100%;
  height: 90vh;
  box-sizing: border-box;
  color: white;
  position: relative;
}

.login-panel-box {
  box-sizing: border-box;
  position: absolute;
  width: 100%;

}

.login-to {
  position: absolute;
  cursor: pointer;
}

.login-to:hover {
  color: #098d25;
  transition: color .3s;
}

.login-to-home {
  top: 10px;
  left: 20px;
}

.login-to-register {
  top: 10px;
  right: 20px;
}

.login-back {
  margin-top: 20vh;
  background: #7fbf90;
  opacity: .3;
}

.login-main {
  overflow: hidden;
  transform: translateY(20%);
  padding: 50px 100px;
  border-radius: 15px;
  box-shadow: 0 0 10px 3px #d3f3c7;
}

.logo {
  display: flex;
  box-sizing: border-box;
  cursor: pointer;
  margin-bottom: 20px;
  justify-content: center;
}

.logo-s {
  display: block;
  font-size: 2em;
  font-weight: bolder;
  color: #459151;
  font-family: 'Georgia';
  font-style: oblique;
}

.logo-j {
  display: block;
  font-size: 1.8em;
  font-weight: bolder;
  color: #40c4be;
  font-family: 'Lucida Handwriting';
  font-style: oblique;
  padding-top: 5px;
}

.code-box {
  text-align: center;
  height: 38px;
  border-radius: 5px;
}

.third {
  margin-top: 10px;
  text-align: center;
}

.third > span {
  font-size: 28px !important;
  cursor: pointer;
}

.third > span:hover {
  color: #7fc3ef;
}

</style>
